<!DOCTYPE html>
<html>
<head>
<title>Incomplete Non-inverting Amplifier Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="650" height="480"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // Helper function for drawing an arrow
    function drawArrow(x1, y1, x2, y2) {
        const headlen = 10; // length of head in pixels
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function for drawing a filled dot (node)
    function drawNode(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, 2 * Math.PI);
        ctx.fill();
    }

    // Helper function for drawing an open circle (terminal)
    function drawTerminal(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.stroke();
    }
    
    // --- Main Drawing ---

    // Ground line
    ctx.beginPath();
    ctx.moveTo(50, 380);
    ctx.lineTo(600, 380);
    ctx.stroke();
    
    // Ground symbol
    const groundX = 325;
    const groundY = 380;
    ctx.beginPath();
    ctx.moveTo(groundX, groundY);
    ctx.lineTo(groundX, groundY + 10);
    ctx.moveTo(groundX - 20, groundY + 10);
    ctx.lineTo(groundX + 20, groundY + 10);
    ctx.moveTo(groundX - 15, groundY + 15);
    ctx.lineTo(groundX + 15, groundY + 15);
    ctx.moveTo(groundX - 10, groundY + 20);
    ctx.lineTo(groundX + 10, groundY + 20);
    ctx.stroke();
    
    // V_IN Section
    const vinX = 100;
    const vinTermY = 180;
    drawArrow(vinX, 380, vinX, vinTermY + 5);
    drawTerminal(vinX, vinTermY);
    ctx.beginPath();
    ctx.moveTo(vinX + 5, vinTermY);
    ctx.lineTo(vinX + 50, vinTermY);
    ctx.stroke();
    ctx.font = 'italic 22px serif';
    ctx.textAlign = 'right';
    ctx.fillText('V', vinX - 15, 280);
    ctx.font = 'italic 16px serif';
    ctx.textAlign = 'left';
    ctx.fillText('IN', vinX - 13, 285);

    // Op-Amp
    const opAmpTipX = 370;
    const opAmpBaseX = 270;
    const opAmpCenterY = 220;
    const opAmpHeight = 140;
    ctx.beginPath();
    ctx.moveTo(opAmpBaseX, opAmpCenterY - opAmpHeight / 2); // top corner
    ctx.lineTo(opAmpBaseX, opAmpCenterY + opAmpHeight / 2); // bottom corner
    ctx.lineTo(opAmpTipX, opAmpCenterY); // tip
    ctx.closePath();
    ctx.stroke();

    // Op-Amp Inputs
    const invertingY = opAmpCenterY - 40;
    const nonInvertingY = opAmpCenterY + 40;
    ctx.beginPath();
    ctx.moveTo(opAmpBaseX, invertingY);
    ctx.lineTo(opAmpBaseX - 50, invertingY);
    ctx.moveTo(opAmpBaseX, nonInvertingY);
    ctx.lineTo(opAmpBaseX - 50, nonInvertingY);
    ctx.stroke();
    
    // Op-Amp Labels
    ctx.font = '30px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('-', opAmpBaseX + 15, invertingY);
    ctx.fillText('+', opAmpBaseX + 15, nonInvertingY);

    // Op-Amp Power
    ctx.font = '16px sans-serif';
    ctx.fillText('+5.0 V', opAmpBaseX + 50, opAmpCenterY - opAmpHeight / 2 - 10);
    ctx.fillText('-5.0 V', opAmpBaseX + 50, opAmpCenterY + opAmpHeight / 2 + 15);

    // Output and Feedback Network
    const feedbackX = 470;
    // Main output line
    ctx.beginPath();
    ctx.moveTo(opAmpTipX, opAmpCenterY);
    ctx.lineTo(feedbackX, opAmpCenterY);
    ctx.stroke();
    
    // V_OUT Section
    const voutArrowX = 560;
    const voutTermX = 590;
    drawArrow(voutArrowX, 380, voutArrowX, opAmpCenterY);
    ctx.beginPath();
    ctx.moveTo(feedbackX, opAmpCenterY);
    ctx.lineTo(voutTermX, opAmpCenterY);
    ctx.stroke();
    drawTerminal(voutTermX, opAmpCenterY);
    ctx.font = 'italic 22px serif';
    ctx.textAlign = 'left';
    ctx.fillText('V', voutArrowX + 10, 300);
    ctx.font = 'italic 16px serif';
    ctx.fillText('OUT', voutArrowX + 22, 305);

    // Resistor Network
    const r_width = 30;
    const r_height = 50;
    const r1_y_top = opAmpCenterY + 20;
    const r2_y_top = r1_y_top + r_height;

    // Wires
    ctx.beginPath();
    ctx.moveTo(feedbackX, opAmpCenterY);
    ctx.lineTo(feedbackX, r1_y_top);
    ctx.moveTo(feedbackX, r2_y_top + r_height);
    ctx.lineTo(feedbackX, 380);
    ctx.stroke();

    // Resistors
    ctx.beginPath();
    ctx.rect(feedbackX - r_width/2, r1_y_top, r_width, r_height); // R1
    ctx.stroke();
    ctx.beginPath();
    ctx.rect(feedbackX - r_width/2, r2_y_top, r_width, r_height); // R2
    ctx.stroke();
    
    // Resistor Labels
    ctx.font = 'italic 22px serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('R', feedbackX + 25, r1_y_top + r_height/2);
    ctx.font = 'italic 16px serif';
    ctx.fillText('1', feedbackX + 37, r1_y_top + r_height/2 + 5);
    
    ctx.font = 'italic 22px serif';
    ctx.fillText('R', feedbackX + 25, r2_y_top + r_height/2);
    ctx.font = 'italic 16px serif';
    ctx.fillText('2', feedbackX + 37, r2_y_top + r_height/2 + 5);

    // Floating feedback tap
    const junctionY = r2_y_top;
    ctx.beginPath();
    ctx.moveTo(feedbackX, junctionY);
    ctx.lineTo(feedbackX - 50, junctionY);
    ctx.stroke();

    // Connection Nodes
    drawNode(feedbackX, opAmpCenterY); // Output junction
    drawNode(feedbackX, junctionY); // R1/R2 junction
    drawNode(feedbackX, 380); // Ground junction

    // Figure Caption
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('Fig. 7.1', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>